<template>
  <div flex-col-center>
    <!-- 标题 -->
    <div flex-center mt-20 text-20><h2>报告</h2></div>

    <!-- 报告列表 -->
    <div class="report-list m-20">
      <div
        v-for="item in reportList"
        :key="item.id"
        class="report-card mb-20"
        @click="gotoDetail"
      >
        <ReportCard :reportMessage="item"></ReportCard>
        <!-- 根据传递的item.id来控制跳转的报告界面是咋样的 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import ReportCard from "./components/ReportCard.vue";
import usePsyReportStore from "../../../store/psy/psyReport";
import { onMounted } from "vue";
import usePsyUserStore from "../../../store/psy/psyUser";

const router = useRouter();
const reportStore = usePsyReportStore();
const userStore = usePsyUserStore();

const UID = userStore.userInfo.uid; // 暂时只从仓库中获取uid信息
// const UID = userStore.getUserInfo().uid;实际应该通过这种方式从后台获取信息，但是API未完善


console.log(UID)
const reportList = ref(null)

const gotoDetail = () =>{
  router.push('/psy/report/detail')
}
onMounted(async ()=>{
  await reportStore.getReportList(UID);
  // 通过获取当前用户的UID然后拿去给reportStore的方法，通过UID去get该账号的报告信息
  reportList.value = reportStore.reportList
})
defineExpose({ reportList})

</script>

<script>
/**
 * 报告页面
 * 负责人：邹峻丰
 */
export default {
  name: "Report",
};
</script>

<style lang="scss" scoped>
.report-card {
  cursor: pointer;
  transition: all 0.2s;
}

.report-card:active {
  transform: scale(0.98);
}
</style>
